<!--
 * @Description:
 * @Author: charles
 * @Date: 2021-10-19 20:57:06
 * @LastEditors: charles
 * @LastEditTime: 2021-10-19 21:26:35
-->
<template>
  <div ref="root" />
</template>
<script>
import { Line } from '@antv/g2plot'
import { get } from '@/utils/request'
export default {
  data() {
    return {
      plot: null,
      sales: []
    }
  },
  async mounted() {
    await this.loadSales()
    await this.initChart()
  },
  beforeDestroy() {
    if (this.plot) {
      this.plot.destroy()
    }
  },
  methods: {
    // 加载排名数据
    async loadSales() {
      const url = '/statistics/dayOrder'
      const response = await get(url)
      this.sales = response.data.map(item => {
        item.total = +parseInt(item.total)
        return item
      })
    },
    initChart() {
      const container = this.$refs.root
      container.style.height = '190px'
      this.plot = new Line(container, {
        data: this.sales,
        xField: 'day',
        yField: 'total',
        tooltip: {
          formatter: (datum) => {
            return { name: datum.day + '销售额：', value: datum.total + '元' }
          }
        }
      })

      this.plot.render()
    }
  }
}
</script>
